<template>
  <!-- 导航部分 -->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>常见缺陷</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="defectQuery" inline>
        <el-form-item label="缺陷描述">
          <el-input v-model="defectQuery.defectDesc"/>
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select placeholder="全部" style="width:100px" v-model="defectQuery.inspectionType">
            <el-option label="尺寸" :value="1"/>
            <el-option label="外观" :value="2"/>
            <el-option label="重量" :value="3"/>
            <el-option label="性能" :value="4"/>
            <el-option label="成分" :value="5"/>
          </el-select>
        </el-form-item>

        <el-form-item label="缺陷等级">
          <el-select placeholder="全部" style="width:100px" v-model="defectQuery.defectLevel">
            <el-option label="轻微缺陷" :value="1"/>
            <el-option label="严重缺陷" :value="2"/>
            <el-option label="致命缺陷" :value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadDefect">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetDefect">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


  <!-- 工具栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-button type="primary" @click="toAdd">新增</el-button>
      <el-button type="primary" @click="toRelease">修改</el-button>
      <el-button type="primary" @click="toDeletes">删除</el-button>
    </el-col>
  </el-row>


  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="defects"
          border
          stripe ref="defectTable"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="defectDesc" label="缺陷描述"/>
        <el-table-column prop="inspectionType" label="检测项类型">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.inspectionType == 1">尺寸</el-tag>
            <el-tag type="success" v-else-if="scope.row.inspectionType == 2">外观</el-tag>
            <el-tag type="success" v-else-if="scope.row.inspectionType == 3">重量</el-tag>
            <el-tag type="success" v-else-if="scope.row.inspectionType == 4">性能</el-tag>
            <el-tag type="success" v-else-if="scope.row.inspectionType == 5">成分</el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="defectLevel" label="缺陷等级">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.defectLevel == 1">轻微缺陷</el-tag>
            <el-tag type="success" v-else-if="scope.row.defectLevel == 2">严重缺陷</el-tag>
            <el-tag type="success" v-else-if="scope.row.defectLevel == 3">致命缺陷</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="toRelease(scope.row.defectId)">修改</el-button>
              <el-button size="small" type="primary" @click="toDelete(scope.row.defectId)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <!-- 新增的弹窗 -->
  <el-dialog v-model="defectAddWinDialogVisible"
             title="新增缺陷"
             width="50%"
  >

    <el-form :model="newDefect">


      <el-form-item label="缺陷描述">
        <el-input v-model="newDefect.defectDesc"/>
      </el-form-item>


      <el-form-item label="检测项类型">
        <el-select  style="width:100px" v-model="newDefect.inspectionType">
          <el-option label="尺寸" :value="1"/>
          <el-option label="外观" :value="2"/>
          <el-option label="重量" :value="3"/>
          <el-option label="性能" :value="4"/>
          <el-option label="成分" :value="5"/>
        </el-select>
      </el-form-item>

      <el-form-item label="缺陷等级">
        <el-select  style="width:100px" v-model="newDefect.defectLevel">
          <el-option label="轻微缺陷" :value="1"/>
          <el-option label="严重缺陷" :value="2"/>
          <el-option label="致命缺陷" :value="3"/>
        </el-select>
      </el-form-item>


    </el-form>

    <el-button @click="dialogVisible">取消</el-button>
    <el-button type="primary" @click="addDefectSubmit">
      提交
    </el-button>


  </el-dialog>


  <!-- 编辑的弹窗 -->
  <el-dialog v-model="defectUpdateWinDialogVisible"
             title="新增缺陷"
             width="50%"
  >

    <el-form :model="updateDefect">


      <el-form-item label="缺陷描述">
        <el-input v-model="updateDefect.defectDesc"/>
      </el-form-item>


      <el-form-item label="检测项类型">
        <el-select  style="width:100px" v-model="updateDefect.inspectionType">
          <el-option label="尺寸" :value="1"/>
          <el-option label="外观" :value="2"/>
          <el-option label="重量" :value="3"/>
          <el-option label="性能" :value="4"/>
          <el-option label="成分" :value="5"/>
        </el-select>
      </el-form-item>

      <el-form-item label="缺陷等级">
        <el-select  style="width:100px" v-model="updateDefect.defectLevel">
          <el-option label="轻微缺陷" :value="1"/>
          <el-option label="严重缺陷" :value="2"/>
          <el-option label="致命缺陷" :value="3"/>
        </el-select>
      </el-form-item>


    </el-form>

    <el-button @click="updateDialogVisible">取消</el-button>
    <el-button type="primary" @click="updateDefectSubmit">
      提交
    </el-button>


  </el-dialog>












  <!-- 分页栏 -->
  <el-row style="margin-top: 10px">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>



</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
import defectRequest from "@/api/defect.js"
import {ElMessageBox} from "element-plus";
import {ElMessage} from "element-plus";
// 封装查询条件
let defectQuery = ref({});
// 封装查询的结果集合
let defects = ref([])
//保存前端多选的数据
let defectTable = ref(null);
// 封装当前的页面
let curPage = ref(1);
// 封装查询的数据总条数
let total = ref(0);


function loadDefect(){
  console.log(defectQuery.value)
  defectRequest.loadDefects(defectQuery.value,curPage.value,10,res =>{
    total.value = res.data.total;
    defects.value = res.data.list;
  })
}

//重置按钮
function resetDefect(){
  defectQuery.value = null;
  loadDefect();
}

function changePage(value){
  curPage.value = value;
  loadDefect();
}


//新增弹窗标记
let defectAddWinDialogVisible = ref(false);
//保存新增数据
let newDefect = ref({});

//新增
function toAdd(){
  defectAddWinDialogVisible.value = true;
}

//取消
function dialogVisible(){
  defectAddWinDialogVisible.value = false;
}

//提交
function addDefectSubmit(){

  console.log(newDefect.value)
  defectRequest.addDefect(newDefect.value,res => {

    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "新增成功"
      });
      newDefect.value = {};
      // 关闭窗体
      dialogVisible();
      // 刷新表格
      loadDefect();
    } else {
      ElMessage({
        type: "error",
        message: "新增失败"
      });
    }
  });
}

//行编辑弹窗标记
let defectUpdateWinDialogVisible = ref(false);
//保存编辑内容
let updateDefect = ref([]);

//点击编辑按钮回显数据
function toRelease(defectId){
    defectRequest.selectDefectById(defectId, res=>{
      updateDefect.value = res.data;
    })
  defectUpdateWinDialogVisible.value = true;
}
//行编辑取消按钮
function updateDialogVisible(){
  defectUpdateWinDialogVisible.value = false;
}

// 行编辑提交按钮
function updateDefectSubmit(){
  console.log(updateDefect.value)
    defectRequest.updateDefect(updateDefect.value, res=>{
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "编辑成功"
        });
        // 关闭窗体
        updateDialogVisible();
        // 刷新表格
        loadDefect();
      } else {
        ElMessage({
          type: "error",
          message: "编辑失败"
        });
      }
    })
}

//行删除按钮
function toDelete(defectId){
  defectRequest.deleteDefect(defectId,res=>{
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      // 刷新表格
      loadDefect();
    } else {
      ElMessage({
        type: "error",
        message: "删除失败"
      });
    }
  })
}


//批量删除
function toDeletes(){
  let selectRows = defectTable.value.getSelectionRows();
  if(selectRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '你确定要将选中的任务删除吗',
      '提示',
      {
        confirmButtonText:'是的',
        cancelButtonText:'点错了',
        type:'warning',
      }
  ).then(()=>{
    let defectIds = [];

    selectRows.forEach(row=>{
      defectIds.push(row.defectId);
    })

    //
    defectRequest.deletes(defectIds,res=>{
      loadDefect()
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"成功删除[" + res.data + "]条数据"
        })
        loadDefect()
      }else{
        ElMessage({
          type:"warning",
          message:"删除失败"
        })
      }
    });


  }).catch(()=>{});





}





// 在声明周期的onmounted函数中调用loadUsers函数
onMounted(()=>{

  loadDefect();
})

</script>

<style scoped>

</style>